<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    :close-on-click-modal="false"
    draggable
    :destroy-on-close="true"
    :attr="$attrs"
    :before-close="handleClose"
  >
    <slot/>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['close'])
const visible = defineModel(false)

const typeMap = {
  add: '新增',
  edit: '编辑',
  detail: '详情'
}
const dialogTitle = computed(() => {
  if(props.type === 'detail') {
    return props.title + typeMap[props.type]
  }
  return typeMap[props.type] + props.title
})

const handleClose = () => {
  visible.value = false
  emits('close')
}
</script>

<style lang="scss" scoped>

</style>
